<template>
	<!-- 签单列表 -->
	<view class="wrap">
		<u-navbar :placeholder="true" title="签单"
			@leftClick="goTab('/pages/homePage/index')">
		</u-navbar>
		<view class="wrap_box">
			<view class="header">
				<u-tabs :list="tabList" @change="changeTab" lineWidth="30" lineColor="#144ea2"></u-tabs>
				<view class="search">
					<u--input placeholder="请输入航班号" prefixIcon="search" border="none" @change="changeInput"></u--input>

					<u-button @click="show = true" type="text" class="btn">请选择日期
						<image src="@/static/images/icon/Calendar.png" class="img"></image>
					</u-button>
				</view>
			</view>
			<view class="card" >
				<bill-item v-for="(item,index) in billList" :key="item.id" :form="item" @goSignDetail="goSignDetail"
					:infoAirline="item.billInfo['info-airline']" />
			</view>
			<u-calendar :show="show" @confirm="confirm" @close="close"></u-calendar>
		</view>
	</view>
</template>

<script>
	import {
		getAction,
		postAction,
		httpAction,
		deleteAction
	} from "@/api/manage";
	import {
		mapActions
	} from "vuex";
	import {
		Value
	} from "sass";
	export default {
		data() {
			return {
				loading: false,
				urls: {
					list: '/system/receipt/list',
					flight: '/billFlight/flight/'
					// list: '/system/item/list',
				},
				tabList: [{
					name: '待签字',
					value: 1
				}, {
					name: '已签字',
					value: 0
				}, ],
				//筛选条件
				params: {
					signStatus: '1',
				},
				show: false,
				billList: []
			}
		},
		onLoad: function() {
			this.loadData()
			this.getChargeAssuranceList()
		},
		onShow:function() {
			this.loadData()
		},
		methods: {
			...mapActions(["getChargeAssuranceList", ]),
			async loadData() {
				this.loading = true;
				let {
					data
				} = await getAction(this.urls.list, this.params);
				this.loading = false;
				data.records.forEach(item => {
					item.billInfo = JSON.parse(item.billInfo);
					item.billInfo.tasks.forEach(val => {
						val.options.forEach(val2 => {
							if (val2.optionValue == true)
								val.value = val2.elementName;
						});
					});
				});
				this.$set(this,'billList',data.records)
				
			},
			// 前往签单详情
			goSignDetail(item) {
				this.$store.commit("GETBILLINFO", item);
				console.log(item)
				this.$tab.navigateTo('/pages/signBill/billDetail')
			},
			// 标签切换
			changeTab(val) {
				this.params.signStatus = val.value
				this.loadData(this.params)
			},
			// 输入框监听
			changeInput() {

			},
			// 时间筛选
			confirm() {
				this.show = false
			},
			close() {
				this.show = false
			},

		}
	}
</script>

<style lang="scss" scoped>
	.header {
		background-color: #fff;
		max-height: 20%;
		margin-bottom: 10px;

		::v-deep .u-tabs__wrapper__nav__item {
			width: 50%;
		}

		.search {
			display: flex;
			padding: 10px 0;
			width: 85%;
			margin: 0 auto 10px;
			justify-content: center;

			.img {
				margin-left: 10px;
				width: 20px;
				height: 20px
			}

			::v-deep .u-input {
				background-color: #f5f5f5;
				width: 35%;
				border-radius: 20px !important;
				padding: 2px 10px !important;
			}

			.btn {
				width: 45%;
			}
		}
	}
</style>